<template>
    <el-form ref="ruleFormRef" :model="formData" :rules="formRules" size="small" :inline="false" label-width="100px">
      <el-form-item label="主题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入主题" maxlength="32" size="small"/>
      </el-form-item>
      <el-form-item label="候选人" prop="candidateId">
        <el-select v-model="formData.candidateId" placeholder="请选择候选人" size="small" filterable>
          <el-option v-for="item in candidateList" :key="item.id" :value="item.id" :label="item.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="试卷名称" prop="examName">
        <el-input v-model="formData.examName" placeholder="请输入试卷名称" maxlength="128" size="small"/>
      </el-form-item>
      <el-form-item label="笔试分数" prop="examScore">
        <el-input-number v-model="formData.examScore" :min="0" :max="999" :controls="false" size="small" :precision="2"/>
      </el-form-item>
      <el-form-item label="优先度">
        <el-radio-group v-model="formData.priority">
          <el-radio :label="0" size="small">普通</el-radio>
          <el-radio :label="1" size="small">高</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--    <el-form-item label="通知时间" prop="remindState">-->
      <!--      <el-radio-group v-model="formData.remindState">-->
      <!--        <el-radio v-for="item in remindTimes" :key="item.value" :label="item.value" size="small">{{ item.label }}</el-radio>-->
      <!--      </el-radio-group>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item label="通知方式" prop="remindType">-->
      <!--      <el-checkbox-group v-model="formData.remindType" size="small">-->
      <!--        <el-checkbox label="1">应用、公众号通知</el-checkbox>-->
      <!--        <el-checkbox label="2">短信通知</el-checkbox>-->
      <!--      </el-checkbox-group>-->
      <!--    </el-form-item>-->
      <el-form-item label="备注信息" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" :rows="3" size="small"/>
      </el-form-item>
      <!--  TODO  -->
      <!--        <el-upload-->
      <!--            v-model:file-list="uploadFiles"-->
      <!--            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
      <!--            multiple-->
      <!--            :limit="3"-->
      <!--            :on-preview="handlePreview"-->
      <!--            :on-remove="handleRemove"-->
      <!--            :before-remove="beforeRemove"-->
      <!--            :on-exceed="handleExceed"-->
      <!--            :on-success="uploadSuccess"-->
      <!--        >-->
      <!--          <el-button type="primary">上传</el-button>-->
      <!--          <template #tip>-->
      <!--            <div class="el-upload__tip">请上传小于10M的文件</div>-->
      <!--          </template>-->
      <!--        </el-upload>-->
    </el-form>
</template>

<script>
// 笔试记录 OA_EXAM_RECORD
import {reactive, toRefs, ref, onMounted, watch, nextTick} from 'vue'
import {getListByType} from '/@/api/oa/candidate'
// import {formatDate} from '/@/utils/formatTime'
import {homeApi} from "/@/api/home/index";
// import {format} from "/@/views/home/component/lib/utils";
import { useCalendarConfig } from '/@/stores/calendar';
import { storeToRefs } from 'pinia';

export default {
    name: 'ExamRecordForm',
    props: {
        selectTime: {
            type: String,
            default: null
        },
        editId: {
          type: String,
          default: null
        }
    },
    setup(props, context) {
        const { editId, selectTime } = toRefs(props)
        const homeCalendar = homeApi();
        const storesCalendarConfig = useCalendarConfig();
        const { eventForm } = storeToRefs(storesCalendarConfig)
        const state = reactive({
            formData: {
                candidateId: null,
                title: '笔试记录',
                executorIds: '',    // 执行人默认当前发起事项的人, 不用选择
                examName: null,   // 试卷名称
                examScore: 0,     // 笔试分数
                remark: null,    // 备注
                attach: null,   // 附件url地址
                remindState: 'NONE',     // 提醒时间, 根据枚举类MatterRemindTimeEnum
                remindType: [],     // 提醒方式, 多选
                state: 2,           // 状态 -1草稿 0未开始 1进行中 2已完成 3已退回  4已取消 5已撤回
                priority: 0        // 优先级 0普通 1重要
            },

            candidateList: [],
            // remindTimes: [],
            uploadFiles: [],   // 临时存放上传的文件列表
            originForm: {}
        })
        const ruleFormRef = ref({});
        const formRules = reactive({
            candidateId: {required: true, message: '请选择候选人', trigger: 'change'},
            examName: {required: true, message: '请填写试卷名称', trigger: 'blur'},
            title: {required: true, message: '请填写主题', trigger: 'blur'}
        })
        const uploadSuccess = (res, file, files) => {   // 上传成功后的回调函数
            // 将本次文件的url地址加入到 formData.attach 中, 地址之间逗号拼接
        }
        let close = () => {
            context.emit("BISHISTATUS");
            reset()
        };
        let submit = () => {
            if (!ruleFormRef) return;
            return new Promise(async (resolve, reject) => {
                await ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        if(editId.value) {
                            // 编辑
                            for(let key in state.formData){
                                if(state.originForm.hasOwnProperty(key)){
                                    state.originForm[key] = state.formData[key]
                                }
                                if(state.originForm.info.hasOwnProperty(key)){
                                    state.originForm.info[key] = state.formData[key]
                                }
                            }
                            storesCalendarConfig.setEventForm(state.originForm)
                            reset()
                            close()
                            resolve('edit') 
                        } else {
                            homeCalendar.addExamRecord(state.formData).then((res) => {
                                if (res.code === 0) {
                                    reset()
                                    close()
                                    resolve()
                                }
                            });
                      }
                    } else {
                        reject()
                        console.log("error submit!", fields);
                    }
                });
            })
        };
        const reset = () => {
            if (!ruleFormRef) return
            ruleFormRef.value.resetFields()
        }
        watch(() => eventForm.value,
          val => {
            if(editId.value && val) {
              // 编辑
              nextTick(() => {
                const data = val
                if(!data) return
                state.originForm = data
                for(let params in data.info){
                  // 拿出info里面的数据
                  if(state.formData.hasOwnProperty(params)) {
                    state.formData[params] = data.info[params]
                  }
                }
                for(let key in data) {
                  // 列表里面的数据
                  if(state.formData.hasOwnProperty(key)) {
                    state.formData[key]= data[key]
                  }
                }
                if(data.remindType){
                  state.formData.remindType = data.remindType.split(',')
                }
              })
            }
          }        
        )
        onMounted(() => {
            // 笔试记录的不分状态获取
            getListByType('').then(res => state.candidateList = res.data)
        })
        return {
            ...toRefs(state),
            submit,
            close,
            formRules,
            ruleFormRef,
            reset
        }
    }
}
</script>

<style>

</style>